<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%--<%@ include file="/page/inc_head.jsp"%>--%>
	<script src="${ctx}/resources/html5shiv.min.js"></script>
	<script src="${ctx}/resources/respond.min.js"></script>
	<script src="${ctx}/resources/ace-extra.min.js"></script>
<style type="text/css">
body {
	margin: 0;
	height: 100%;
	width: 100%;
	position: absolute;
	font-size: 12px;
}

#mapContainer {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
}

#tip {
	background-color: #fff;
	border: 1px solid #ccc;
	padding-left: 10px;
	padding-right: 2px;
	position: absolute;
	min-height: 65px;
	top: 10px;
	font-size: 12px;
	right: 10px;
	border-radius: 3px;
	overflow: hidden;
	line-height: 20px;
	min-width: 400px;
}

#tip input[type="button"] {
	background-color: #0D9BF2;
	height: 25px;
	text-align: center;
	line-height: 25px;
	color: #fff;
	font-size: 12px;
	border-radius: 3px;
	outline: none;
	border: 0;
	cursor: pointer;
}

#tip input[type="text"] {
	height: 25px;
	border: 1px solid #ccc;
	padding-left: 5px;
	border-radius: 3px;
	outline: none;
}

#result1 {
	max-height: 300px;
}
</style>

</head>
<body class="no-skin">
	<div class="main-container" id="main-container">
		<script type="text/javascript">
			try
			{
				ace.settings.check('main-container', 'fixed')
			} catch (e)
			{
			}
		</script>
		<div class="main-content">
			<!-- 内容开始 -->
			<div class="page-content">
				${msg_html}
				<h3 class="header smaller lighter blue">选择经纬度</h3>
				<div class="row">
					<div class="col-xs-12">
						<div id="mapContainer"></div>
						<div id="tip">
							<b>请输入关键字：</b> <input type="text" id="keyword" name="keyword"
								value="" onkeydown='keydown(event)' style="width: 95%;" />
							<div id="result1" name="result1"></div>
						</div>
						
						<hr />
							<div>
								<div class="col-xs-12 col-sm-12 " align="right">
									<button class="btn" type="button" onclick="doClose();">
										<i class="fa fa-reply"></i> 关闭
									</button>
									&nbsp; &nbsp; &nbsp;
									<button class="btn btn-info" type="button" id="btn_save"
										onclick="doSave();">
										<i class="fa fa-check"></i> 确定
									</button>
								</div>
							</div>
					</div>
				</div>
			</div>
			<!-- 内容结束-->
		</div>
		<%--<%@ include file="/page/inc_end.jsp"%>--%>

		<script type="text/javascript"
			src="http://webapi.amap.com/maps?v=1.3&key=10cb5f9a7d0d2aa448d9ec00671a8606"></script>
		<script type="text/javascript">
			var selectpoint = "";
			var marker = null;
			var mapObj = null;

			jQuery(function($)
			{
				var point = jQuery('#point', window.parent.document).val();
				if (point.indexOf(".") > -1)
				{
					var lng = point.split(",")[0];
					var lat = point.split(",")[1];
					mapObj = new AMap.Map("mapContainer",
					{
						resizeEnable : true,
						view : new AMap.View2D(
						{
							resizeEnable : true,
							center : new AMap.LngLat(lng, lat),//地图中心点
							zoom : 18
						//地图显示的缩放级别
						}),
						keyboardEnable : false
					});
					addMarker(lat,lng);
				}
				else
				{
					mapObj = new AMap.Map("mapContainer",
					{
						resizeEnable : true,
						view : new AMap.View2D(
						{
							resizeEnable : true,
							center : new AMap.LngLat(116.397428, 39.90923),//地图中心点
							zoom : 13
						//地图显示的缩放级别
						}),
						keyboardEnable : false
					});
				}
				
				//为地图注册click事件获取鼠标点击出的经纬度坐标
				var clickEventListener=AMap.event.addListener(mapObj,'click',function(e)
				{
					addMarker(e.lnglat.getLat(),e.lnglat.getLng());
				});
				
				document.getElementById("keyword").onkeyup = keydown;
			});
			//输入提示
			function autoSearch()
			{
				var keywords = document.getElementById("keyword").value;
				var auto;
				//加载输入提示插件
				AMap.service([ "AMap.Autocomplete" ], function()
				{
					var autoOptions =
					{
						city : "" //城市，默认全国
					};
					auto = new AMap.Autocomplete(autoOptions);
					//查询成功时返回查询结果
					if (keywords.length > 0)
					{
						auto.search(keywords, function(status, result)
						{
							autocomplete_CallBack(result);
						});
					} else
					{
						document.getElementById("result1").style.display = "none";
					}
				});
			}

			//输出输入提示结果的回调函数
			function autocomplete_CallBack(data)
			{
				var resultStr = "";
				var tipArr = data.tips;
				if (tipArr && tipArr.length > 0)
				{
					for (var i = 0; i < tipArr.length; i++)
					{
						resultStr += "<div id='divid"
								+ (i + 1)
								+ "' onmouseover='openMarkerTipById("
								+ (i + 1)
								+ ",this)' onclick='selectResult("
								+ i
								+ ")' onmouseout='onmouseout_MarkerStyle("
								+ (i + 1)
								+ ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\""
								+ "data=" + tipArr[i].adcode + ">" + tipArr[i].name
								+ "<span style='color:#C1C1C1;'>" + tipArr[i].district
								+ "</span></div>";
					}
				} else
				{
					resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
				}
				document.getElementById("result1").curSelect = -1;
				document.getElementById("result1").tipArr = tipArr;
				document.getElementById("result1").innerHTML = resultStr;
				document.getElementById("result1").style.display = "block";
			}

			//输入提示框鼠标滑过时的样式
			function openMarkerTipById(pointid, thiss)
			{ //根据id打开搜索结果点tip 
				thiss.style.background = '#CAE1FF';
			}

			//输入提示框鼠标移出时的样式
			function onmouseout_MarkerStyle(pointid, thiss)
			{ //鼠标移开后点样式恢复 
				thiss.style.background = "";
			}

			//从输入提示框中选择关键字并查询
			function selectResult(index)
			{
				if (index < 0)
				{
					return;
				}
				if (navigator.userAgent.indexOf("MSIE") > 0)
				{
					document.getElementById("keyword").onpropertychange = null;
					document.getElementById("keyword").onfocus = focus_callback;
				}
				//截取输入提示的关键字部分
				var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g, "");
				var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
				document.getElementById("keyword").value = text;
				document.getElementById("result1").style.display = "none";
				//根据选择的输入提示关键字查询
				mapObj.plugin([ "AMap.PlaceSearch" ], function()
				{
					var msearch = new AMap.PlaceSearch(); //构造地点查询类
					AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
					msearch.setCity(cityCode);
					msearch.search(text); //关键字查询查询
				});
			}

			//定位选择输入提示关键字
			function focus_callback()
			{
				if (navigator.userAgent.indexOf("MSIE") > 0)
				{
					document.getElementById("keyword").onpropertychange = autoSearch;
				}
			}

			//输出关键字查询结果的回调函数
			function placeSearch_CallBack(data)
			{
				//清空地图上的InfoWindow和Marker
				mapObj.clearMap();
				var poiArr = data.poiList.pois;
				loadMapCenter(poiArr[0].location.getLat(),poiArr[0].location.getLng());
				mapObj.setFitView();
			}

			function loadMapCenter(lat,lng)
			{
				mapObj.setZoomAndCenter(18, new AMap.LngLat(lng, lat));
			}
			function keydown(event)
			{
				var key = (event || window.event).keyCode;
				var result = document.getElementById("result1");
				var cur = result.curSelect;
				if (key === 40)
				{//down
					if (cur + 1 < result.childNodes.length)
					{
						if (result.childNodes[cur])
						{
							result.childNodes[cur].style.background = '';
						}
						result.curSelect = cur + 1;
						result.childNodes[cur + 1].style.background = '#CAE1FF';
						document.getElementById("keyword").value = result.tipArr[cur + 1].name;
					}
				} else if (key === 38)
				{//up
					if (cur - 1 >= 0)
					{
						if (result.childNodes[cur])
						{
							result.childNodes[cur].style.background = '';
						}
						result.curSelect = cur - 1;
						result.childNodes[cur - 1].style.background = '#CAE1FF';
						document.getElementById("keyword").value = result.tipArr[cur - 1].name;
					}
				} else if (key === 13)
				{
					var res = document.getElementById("result1");
					if (res && res['curSelect'] !== -1)
					{
						selectResult(document.getElementById("result1").curSelect);
					}
				} else
				{
					autoSearch();
				}
			}
			
			
			//添加点标记
			function addMarker(lat,lng)
			{
				mapObj.clearMap();
				
				marker = new AMap.Marker({				  
					icon: "http://webapi.amap.com/images/marker_sprite.png",
					position:new AMap.LngLat(lng, lat)
				});
				marker.setMap(mapObj);  //在地图上添加点
				selectpoint = lng + "," + lat;
				//mapObj.setFitView(); //调整到合理视野
			}
			
			function doSave()
			{
				jQuery('#point', window.parent.document).val(selectpoint);
				doClose();
			}
			function doClose()
			{
				window.parent.doCloseMapPop();
			}
		</script>
</body>
</html>